<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form表单提交</title>
</head>
<!-- 必须先引入vue，  后使用element-ui -->
<script src="./js/vue.js"></script>

<!--引入 element-ui 的样式，-->
<!--<link rel="stylesheet" href="./css/index.css">-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入element 的组件库-->
<!--<script src="./js/index.js"></script>-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/moment.js/2.29.1/moment.min.js"
        type="application/javascript"></script>
<body>
<div id="app">
    <div id="body" style="display: flex;justify-content: center;align-content: center;flex-direction: column">
        <!--新增页面开始    -->
        <el-row>
            <el-button type="primary" @click="dialogVisible = true">新增</el-button>
            <el-button type="primary" @click="downdialogVisible = true">下载</el-button>
            <!--            新增页面-->
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible"
                    width="50%"
                    :before-close="handleClose">
                <!--                页面内容-->
                <div class="body" style="display: flex;flex-direction: column">
                    <div id="from" style="display: flex">
                        <div id="top-left">
                            <el-form ref="form" :model="form" label-width="200px">
                                <!--    备注-->
                                <div id="remark">
                                    <el-form ref="form" :model="form" label-width="200px">
                                        <el-form-item label="备注">
                                            <el-input
                                                    type="text"
                                                    :rows="2"
                                                    placeholder="请输入内容"
                                                    v-model="form.remark"
                                            >
                                            </el-input>
                                        </el-form-item>
                                    </el-form>
                                </div>
                                <!--街道-->
                                <el-form-item label="街道">
                                    <!--                                    <el-row class="demo-autocomplete">-->
                                    <!--                                        <el-col :span="12">-->
                                    <!--                                            <el-autocomplete-->
                                    <!--                                                    class="inline-input"-->
                                    <!--                                                    v-model="StreetValue"-->
                                    <!--                                                    :fetch-suggestions="StreetSearch"-->
                                    <!--                                                    placeholder="请输入内容"-->
                                    <!--                                                    @select="Street_handleSelect"-->
                                    <!--                                                    @blur=""-->
                                    <!--                                            ></el-autocomplete>-->
                                    <!--                                        </el-col>-->
                                    <!--                                    </el-row>-->
                                    <el-select
                                            v-model="form.street"
                                            filterable
                                            allow-create
                                            default-first-option
                                            placeholder="街道名称"
                                            @change="chooseStreet">
                                        <el-option
                                                v-for="item in streetoptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <!--门前三包责任书-->
                                <el-form-item label="门前三包责任书">
                                    <el-radio-group v-model="form.letterOfResponsibility">
                                        <el-radio label="有" @change="ResponsibilityChange"></el-radio>
                                        <el-radio label="无" @change="ResponsibilityChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>


                            </el-form>
                        </div>
                        <div id="top-right">
                            <el-form ref="form" :model="form" label-width="160px">
                                <!--日期-->
                                <el-form-item label="日期">
                                    <div class="block">
                                        <el-date-picker
                                                v-model="form.recordDate"
                                                type="date"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                                <!--人员-->
                                <el-form-item label="人员">
                                    <!--                                    <el-row class="demo-autocomplete">-->
                                    <!--                                        <el-col :span="12">-->
                                    <!--                                            <el-autocomplete-->
                                    <!--                                                    class="inline-input"-->
                                    <!--                                                    v-model="inspectors"-->
                                    <!--                                                    :fetch-suggestions="inspectorsSearch"-->
                                    <!--                                                    placeholder="请输入内容"-->
                                    <!--                                                    @select="people_handleSelect"-->
                                    <!--                                            ></el-autocomplete>-->
                                    <!--                                        </el-col>-->
                                    <!--                                    </el-row>-->
                                    <el-select
                                            v-model="form.inspectors"
                                            filterable
                                            allow-create
                                            multiple
                                            default-first-option
                                            placeholder="人员姓名"
                                            @change="chooseInspectors">
                                        <el-option
                                                v-for="item in peoloadoptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <!--门头牌匾是否破损-->
                                <el-form-item label="门头牌匾是否破损">
                                    <el-radio-group v-model="form.isDilapidation">
                                        <el-radio label="是" @change="DilapidationChange"></el-radio>
                                        <el-radio label="否" @change="DilapidationChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div id="middle">
                        <el-form ref="form" :model="form" label-width="200px">
                            <!--问题-->
                            <el-form-item label="问题">
                                <!--                                <el-row class="demo-autocomplete">-->
                                <!--                                    <el-col :span="12">-->
                                <!--                                        <el-autocomplete-->
                                <!--                                                class="inline-input"-->
                                <!--                                                v-model="ProblemValue"-->
                                <!--                                                :fetch-suggestions="ProblemSearch"-->
                                <!--                                                placeholder="请输入内容"-->
                                <!--                                                @select="Problem_handleSelect"-->
                                <!--                                        ></el-autocomplete>-->
                                <!--                                    </el-col>-->
                                <!--                                </el-row>-->
                                <el-select
                                        v-model="form.issue"
                                        filterable
                                        allow-create
                                        default-first-option
                                        placeholder="问题描述"
                                        @change="chooseProblemValue">
                                    <el-option
                                            v-for="item in problemoptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div id="bottom" style="display: flex">
                        <div id="bottom-left">
                            <el-form ref="form" :model="form" label-width="200px">
                                <!--店外经营-->
                                <el-form-item label="店外经营">
                                    <el-radio-group v-model="form.operateOutsideTheStore">
                                        <el-radio label="是" @change="OutsideTheStoreChange"></el-radio>
                                        <el-radio label="否" @change="OutsideTheStoreChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <!--共享单车-->
                                <el-form-item label="共享单车是否乱停放">
                                    <el-radio-group v-model="form.sharedBikesAreParkedIndiscriminately">
                                        <el-radio label="是" @change="sharedBikesAreChange"></el-radio>
                                        <el-radio label="否" @change="sharedBikesAreChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!--占道经营-->
                                <el-form-item label="占道经营">
                                    <el-radio-group v-model="form.occupyTheRoadToOperate">
                                        <el-radio label="是" @change="TheRoadToOperateChange"></el-radio>
                                        <el-radio label="否" @change="TheRoadToOperateChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div id="bottom-right">
                            <el-form ref="form" :model="form" label-width="260px">
                                <!--占道促销-->
                                <el-form-item label="占道促销">
                                    <el-radio-group v-model="form.occupyTheRoadPromotion">
                                        <el-radio label="是" @change="TheRoadPromotionChange"></el-radio>
                                        <el-radio label="否" @change="TheRoadPromotionChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!--占道装修-->
                                <el-form-item label="占道装修">
                                    <el-radio-group v-model="form.occupancyRoadRenovation">
                                        <el-radio label="是" @change="RoadRenovationChange"></el-radio>
                                        <el-radio label="否" @change="RoadRenovationChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!--露天烧烤-->
                                <el-form-item label="露天烧烤">
                                    <el-radio-group v-model="form.outdoorBarbecue">
                                        <el-radio label="是" @change="outdoorBarbecueChange"></el-radio>
                                        <el-radio label="否" @change="outdoorBarbecueChange"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div id="pictureUpload">
                        <!--图片上传-->
                        <el-form ref="form" :model="form" label-width="200px">
                            <el-form-item label="处理前">
                                <el-upload
                                        drag
                                        action="http://43.138.17.73:81/upload"
                                        :on-preview="handlePictureCardPreview"
                                        :on-success="beforeUploadImgSuccess"
                                        :on-remove="handleRemove">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible_pic">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item label="处理后">
                                <el-upload
                                        drag
                                        action="http://43.138.17.73:81/upload"
                                        :on-preview="handlePictureCardPreview"
                                        :on-success="afterUploadImgSuccess"
                                        :on-remove="handleRemove">
                                    <i class="el-icon-upload"></i>
                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible_pic">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                        </el-form>
                    </div>
                    <el-form ref="form" :model="form" label-width="200px">
                        <!--店名-->
                        <el-form-item label="店名">
                            <el-input v-model="form.storeName"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleCommit">确 定</el-button>
              </span>
            </el-dialog>
        </el-row>
        <!--新增结束-->
        <!--根据日期导出工作台账-->
        <el-dialog
                title="导出台账"
                :visible.sync="downdialogVisible"
                width="30%"
                :before-close="downhandleClose">
            <div class="block">
                <span class="demonstration">默认</span>
                <el-date-picker
                        v-model="DowndDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="downdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="downloadFile">确 定</el-button>
          </span>
        </el-dialog>
        <!--导出工作台账结束-->
        <div id="table">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    max-height="100vh">
                <el-table-column
                        fixed
                        prop="recordDate"
                        label="日期"
                        width="150"
                        :formatter="formatterTime">
                </el-table-column>
                <el-table-column
                        prop="street"
                        label="街道"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="inspectors"
                        label="巡查人员"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="letterOfResponsibility"
                        label="门前三包责任书"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="isDilapidation"
                        label="门头牌匾是否破损"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="issue"
                        label="问题"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="operateOutsideTheStore"
                        label="店外经营"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="occupyTheRoadPromotion"
                        label="占道促销"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="sharedBikesAreParkedIndiscriminately"
                        label="共享单车乱停放"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="occupancyRoadRenovation"
                        label="占道装修"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="occupyTheRoadToOperate"
                        label="占道经营"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="outdoorBarbecue"
                        label="露天烧烤"
                        width="120">
                </el-table-column>
                <el-table-column label="图片（处理前）">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.beforePicture" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.beforePicture" style="width: 30px;height: 30px">
                        </el-popover>
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="图片（处理后）">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.afterPicture" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.afterPicture" style="width: 30px;height: 30px">
                        </el-popover>
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="storeName"
                        label="店名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, tableData)"
                                type="text"
                                size="small">
                            移除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="sizeChange">
                </el-pagination>
            </div>

        </div>
    </div>


</div>
</body>

<script>
    new Vue({
        el: '#app', //el用于指定当前Vue实例为哪个容器服务，值通常为选择器字符串。
        data: { //data中用于存储数据，数据供el所指定的容器去使用。
            name: 'form表单',
            tableData: [],
            tableData_one: [{
                recordDate: "",//时间
                inspectors: "",//名字
                street: "",//街道
                letterOfResponsibility: "",//门前三包责任书
                isDilapidation: "",//门头牌匾是否破损
                issue: "",//乱堆放
                operateOutsideTheStore: "",//店外经营
                occupyTheRoadPromotion: "",//占道促销
                sharedBikesAreParkedIndiscriminately: "",//共享单车乱停放
                occupancyRoadRenovation: "",//占道装修
                occupyTheRoadToOperate: "",//占道经营
                outdoorBarbecue: "",//露天烧烤
                beforePicture: "",//处理前的图片
                afterPicture: "",//处理后的图片
                storeName: "",//店名
                remark: "",//备注
            }],
            total: 0,
            count: 1,
            downdialogVisible: false,
            DowndDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
            dialogVisible: false,
            peoloadoptions: [{//人员数据
                value: '高彦飞',
                label: '高彦飞'
            }, {
                value: '王瑞涛',
                label: '王瑞涛'
            }, {
                value: '钱睿',
                label: '钱睿'
            }, {
                value: '史晋生',
                label: '史晋生'
            }, {
                value: '杜文帅',
                label: '杜文帅'
            }, {
                value: '邸超',
                label: '邸超'
            }, {
                value: '葛雷',
                label: '葛雷'
            }],
            problemoptions: [{//问题数据
                value: '乱设摊点',
                label: '乱设摊点'
            }, {
                value: '乱搭乱建',
                label: '乱搭乱建'
            }, {
                value: '乱张贴',
                label: '乱张贴'
            }, {
                value: '乱涂写',
                label: '乱涂写'
            }, {
                value: '乱刻画',
                label: '乱刻画'
            }, {
                value: '乱吊挂',
                label: '乱吊挂'
            }, {
                value: '乱堆放',
                label: '乱堆放'
            }, {
                value: '广告牌',
                label: '广告牌'
            }, {
                value: '橱窗广告',
                label: '橱窗广告'
            }, {
                value: '私搭拱门',
                label: '私搭拱门'
            }],
            streetoptions: [{ //街道数据
                value: '航苑南街',
                label: '航苑南街'
            }, {
                value: '航苑北街',
                label: '航苑北街'
            }, {
                value: '航苑路',
                label: '航苑路'
            }, {
                value: '航苑西路',
                label: '航苑西路'
            }, {
                value: '并州路',
                label: '并州路'
            }, {
                value: '太堡街',
                label: '太堡街'
            }, {
                value: '建设南路',
                label: '建设南路'
            }, {
                value: '长风街',
                label: '长风街'
            }, {
                value: '坞城西路',
                label: '坞城西路'
            }, {
                value: '坞城北街',
                label: '坞城北街'
            }, {
                value: '坞城路',
                label: '坞城路'
            }, {
                value: '军民路',
                label: '军民路'
            }, {
                value: '坞城中路',
                label: '坞城中路'
            }, {
                value: '省府街',
                label: '省府街'
            }, {
                value: '八一街',
                label: '八一街'
            }, {
                value: '体育路',
                label: '体育路'
            }, {
                value: '体育南路',
                label: '体育南路'
            }, {
                value: '学府街',
                label: '学府街'
            }, {
                value: '坞城东街',
                label: '坞城东街'
            }, {
                value: '太榆路',
                label: '太榆路'
            }, {
                value: '党校路',
                label: '党校路'
            }, {
                value: '师范街',
                label: '师范街'
            }, {
                value: '许坦西街',
                label: '许坦西街'
            }, {
                value: '锦苑街',
                label: '锦苑街'
            }, {
                value: '锦尚巷',
                label: '锦尚巷'
            }, {
                value: '南中环街',
                label: '南中环街'
            }, {
                value: '晋阳街',
                label: '晋阳街'
            }, {
                value: '亲贤路',
                label: '亲贤路'
            }],
            form: {
                storeName: "",//店名
                letterOfResponsibility: "否",//门前三包责任书
                operateOutsideTheStore: "否",//店外经营
                occupyTheRoadToOperate: "否",//占道经营
                occupyTheRoadPromotion: "否",//占道促销
                occupancyRoadRenovation: "否",//占道装修
                outdoorBarbecue: "否",//露天烧烤
                sharedBikesAreParkedIndiscriminately: "否",//共享单车乱停放
                desc: '',
                recordDate: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),//时间
                value: "",
                remark: "",
                inspectors: ""
            },
            ProblemValue: "",
            StreetValue: "",
            inspectors: "",//名字
            dialogImageUrl: '',
            dialogVisible_pic: false,
            remark: "",
            lastPostFormData: {
                recordDate: "",//时间
                inspectors: "",//名字
                street: "",//街道
                letterOfResponsibility: "",//门前三包责任书
                isDilapidation: "",//门头牌匾是否破损
                issue: "",//乱堆放
                operateOutsideTheStore: "",//店外经营
                occupyTheRoadPromotion: "",//占道促销
                sharedBikesAreParkedIndiscriminately: "",//共享单车乱停放
                occupancyRoadRenovation: "",//占道装修
                occupyTheRoadToOperate: "",//占道经营
                outdoorBarbecue: "",//露天烧烤
                beforePicture: "",//处理前的图片
                afterPicture: "",//处理后的图片
                storeName: "",//店名
                remark: "",//备注
            }
        },
        created() {
            this.requestData(this.count)
            // window.downloads.onChanged.addListener(function(downloadDelta) {
            //     console.log('Download state changed: ' + downloadDelta.state.current);
            // });
        },
        mounted() {

        },
        methods: {
            //请求数据
            requestData(e) {
                console.warn(e)
                let that = this
                //获取列表请求接口
                axios.get('http://43.138.17.73:81/workLedger/list',
                    {
                        params: {
                            start: e,
                            size: 10
                        }
                    })
                    .then(function (res) {
                        console.log(res.request.responseURL)
                        console.log(res.data)
                        that.tableData = res.data.records
                        that.total = res.data.total
                        that.pagerCount = res.data.current
                        console.log("赋值的数据===》", that.tableData, that.total,
                            that.pagerCount)
                    }).catch(function (error) {
                    console.log("请求失败===》", error)
                })
            },
            //下一页和上一页，重新请求数据
            sizeChange(e) {
                this.count = e
                this.requestData(this.count)
            },
            //删除工作账目
            deleteRow(index, rows) {
                // rows.splice(index, 1);
                console.log(index)
                console.log(rows[index].id)
                //删除行接口
                axios.delete('http://43.138.17.73:81/workLedger/del', {
                    params: {	// 请求参数拼接在url上
                        id: rows[index].id
                    }
                }).then(res => {
                    console.log(res)
                    rows.splice(index, 1);
                })
            },
            //确定提交按钮
            handleCommit() {
                this.FormSubmission();
                this.dialogVisible = false

            },
            //表单逻辑
            // 图片上传
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                console.log(file.url);
                this.dialogImageUrl = file.url;
                console.log(this.dialogImageUrl);
                this.dialogVisible_pic = true;
            },
            //处理前图片返回的http地址，直接赋值即可。
            beforeUploadImgSuccess(file) {
                this.form.beforePicture = file
                console.log("beforeUploadImgSuccess", file);
            },
            //处理后图片上传返回的http地址，直接赋值即可。
            afterUploadImgSuccess(file) {
                console.log("afterUploadImgSuccess", file);
                this.form.afterPicture = file;
            },
            // 人员下拉选框筛选
            chooseInspectors(){
                console.log(this.inspectors)
            },
            // 街道下拉选框筛选
            chooseStreet(){
                console.log(this.StreetValue)
            },
            // 问题下拉选框筛选
            chooseProblemValue(){
                console.log(this.ProblemValue)
            },
            //单选框处理
            //门前三包责任书
            ResponsibilityChange(val) {
                console.log("选中了" + val)
                if (val === '有') {
                    this.lastPostFormData.letterOfResponsibility = '门前有三包责任书'
                } else {
                    console.log("不透传字段")
                }
            },
            //门头牌匾是否破损
            DilapidationChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.isDilapidation = '门头牌匾已经破损'
                } else {
                    console.log("不透传字段")
                }
            },
            // 店外经营
            OutsideTheStoreChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.operateOutsideTheStore = '店外经营'
                } else {
                    console.log("不透传字段")
                }
            },
            // 共享单车是否乱停放
            sharedBikesAreChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.sharedBikesAreParkedIndiscriminately = '共享单车乱停放'
                } else {
                    console.log("不透传字段")
                }
            },
            // 占道经营
            TheRoadToOperateChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.occupyTheRoadToOperate = '占道经营'
                } else {
                    console.log("不透传字段")
                }
            },
            // 占道促销
            TheRoadPromotionChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.occupyTheRoadPromotion = '占道促销'
                } else {
                    console.log("不透传字段")
                }
            },
            // 占道装修
            RoadRenovationChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.occupancyRoadRenovation = '占道装修'
                } else {
                    console.log("不透传字段")
                }
            },
            // 露天烧烤
            outdoorBarbecueChange(val) {
                console.log("选中了" + val)
                if (val === '是') {
                    this.lastPostFormData.outdoorBarbecue = '露天烧烤'
                } else {
                    console.log("不透传字段")
                }
            },
            //时间日期处理
            // 截取时间 只展示年月日
            formatterTime(row, column) {
                let data = row[column.property]
                return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
            },
            handleSelect(item) {
                console.log(item);
            },
            FormSubmission() {
                let that = this;
                // http://43.138.17.73:81/workLedger/add
                // 处理时间,默认当前时间
                this.lastPostFormData.recordDate = this.form.recordDate;
                // 街道
                this.lastPostFormData.storeName = this.form.storeName;
//            if(this.lastPostFormData.storeName.length<=2){
//                this.$notify({
//                    title: '警告',
//                    message: '请填写合法的店名，不少于两个字符',
//                    type: 'warning'
//                });
//            }
                // 处理人

                let inspectorstest = this.form.inspectors.join("、")
                this.lastPostFormData.inspectors = inspectorstest;
                // 备注
                this.lastPostFormData.remark = this.form.remark;
                //乱堆放
                this.lastPostFormData.issue = this.form.issue;
                //处理前的图片
                this.lastPostFormData.beforePicture = this.form.beforePicture;
                //处理后的图片
                this.lastPostFormData.afterPicture = this.form.afterPicture;
                //街道
                this.lastPostFormData.street = this.form.street;
                console.log("提交表单的时候的数据=》", this.lastPostFormData);

                axios.post("http://43.138.17.73:81/workLedger/add", this.lastPostFormData).then((res) => {

                    console.log("提交成功", res)

                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    window.location.reload();

                }).catch(err => {
                    console.log("提交失败")
                    this.$message.error('提交失败');
                });

                //axios.post("",{});

            },
            //取消按钮
            handleClose() {
                console.log("handleClose===>弹窗关闭")
                this.dialogVisible = false
            },
            downhandleClose() {
                console.log("handleClose===>弹窗关闭")
                this.downdialogVisible = false
            },
            downloadFile() {
                this.downdialogVisible = false
                let downDate = moment(this.DowndDate).format('YYYY-MM-DD')
                console.log("downDate=>", downDate)
                let url = "http://43.138.17.73:81/export/exportTest?date=" + downDate;
                let fileDate = moment(this.DowndDate).format('MM.DD')
                let filename = fileDate + "小店区执法大队市容日常巡查工作台账" + ".xlsx";
                fetch(url, {
                    method: 'post'
                })
                    .then(res => res.blob())
                    .then(blob => {
                        const blobUrl = window.URL.createObjectURL(blob)
                        const a = document.createElement('a')
                        a.download = filename
                        a.href = blobUrl
                        a.target = "_blank"
                        document.body.appendChild(a)
                        a.click()
                        a.remove()
                        window.URL.revokeObjectURL(blobUrl)
                    })
            },
        },
    })
</script>
</html>